import type { TaskPropsType } from './typings'
import { defineComponent } from 'vue'
import { ElDialog, ElButton } from 'element-plus'
import styles from './index.module.scss'

export default defineComponent({
  props: ['visible', 'list'],
  emits: ['cancel'],
  setup(props: TaskPropsType, { emit }) {
    // 关闭弹框事件回调
    const handleCloseModal = () => {
      emit('cancel')
    }

    return () => {
      const { visible, list } = props
      return (
        <ElDialog
          width="800px"
          title={'巡视任务生成明细'}
          modelValue={visible}
          closeOnClickModal={false} // 点遮罩层不关弹窗
          draggable // 可拖拽
          beforeClose={handleCloseModal}
          v-slots={{
            footer: () => (
              <>
                <ElButton onClick={handleCloseModal}>取消</ElButton>
              </>
            )
          }}
        >
          <table class={styles.table}>
            <tr style="background-color: #F5F7FA;">
              <td>周期</td>
              <td>时间</td>
            </tr>
            {list.map((item: any, index: any) => (
              <tr>
                <td>{`第${index + 1}次任务生成周期`}</td>
                <td>{item}</td>
              </tr>
            ))}
          </table>
        </ElDialog>
      )
    }
  }
})
